<template>
    <!-- 弹出层 -->
    <a-modal title="新增学生" @cancel="btnCancel" @ok="btnOk" v-model:visible="showDialogComputed">
        <!-- labelCol定义 表单中左侧标题的一个宽度 -->
        <a-form :labelCol="{ span: 4 }">
            <a-form-item label="学生姓名" name="stuName" v-bind="form.validateInfos.stuName">
                <a-input v-model:value="formData.stuName" placeholder="请输入姓名"></a-input>
            </a-form-item>
            <a-form-item label="手机号" name="tel" v-bind="form.validateInfos.tel">
                <a-input v-model:value="formData.tel" placeholder="请输入手机号"></a-input>
            </a-form-item>
            <a-form-item label="班级号" name="className" v-bind="form.validateInfos.className">
                <a-input v-model:value="formData.className" placeholder="请输入班级号"></a-input>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup lang="ts">
import { Form, message } from 'ant-design-vue'

// 父子组件通信 父：v-model:showDialog="showDialog"
// 子： emits('update:showDialog','传给父组件的值')

// Props是单向数据流只能在父组件修改，不能在子组件修改
const { showDialog } = defineProps({
    showDialog: Boolean
})

// 得到一个事件触发器
const emits = defineEmits<{
    (e: 'update:showDialog', val: Boolean): void,
    (e: 'addSuccess'): void,
}>()
// const emits = defineEmits(['update:showDialog'])

const initValues = {
    stuName: '',
    tel: '',
    className: '',
    password: '123456'
}
const formData = ref(initValues) // 声明一个响应式数据

const showDialogComputed = computed({
    get() {
        return showDialog  // 读取Props传来的值
    },
    set(val) {
        // val 是需要从父组件去入手修改 子传父
        emits('update:showDialog', val) // 告诉父组件 去修改showDialog的值
    }
})

const btnCancel = () => {
    form.resetFields() // 清除数据 并且清除校验
}

const btnOk = async () => {
    await form.validate()
    // 到此不证明校验通过
    const res = await addStudent(formData.value)
    // 校验通知
    res.code === 201 ? message.success('新增学生成功') : message.error('新增学生失败'),

        btnCancel(),

        // 关闭弹层
        showDialogComputed.value = false

    // 新增成功 只是后端接口插入了一条数据- 前端并没有更新- 重新拉取数据
    // 告诉父组件
    emits('addSuccess')
}

// 校验规则
const rules = reactive({
    stuName: [
        { required: true, message: '学生姓名不能为空', trigger: 'blur' },
        { min: 1, max: 4, message: '学生姓名1-4位' }
    ],
    tel: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
        }
    ],
    className: [{ required: true, message: '班级号不能为空', trigger: 'blur' }],
})

// 引入antd的From下的useForm方法把校验规则绑定在formData.value上
const form = Form.useForm(formData.value, rules)


</script>